<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写与核对订单</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/order.ordersubmit.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body style="position: static">


<div id="add-user-layer" style="display: none; padding: 20px">
    <form id="add-user-form" class="layui-form layui-form-pane">
        <input type="hidden" name="pid" id="pid">
        <div class="layui-form-item">
            <label class="layui-form-label">汽车名称</label>
            <div class="layui-input-block">
                <input type="text" name="carname" id="carname" class="layui-input" lay-verify="required"
                       readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">取车地址</label>
            <div class="layui-input-block">
                <input type="text" name="getcity" id="getcity" class="layui-input" lay-verify="required"
                       readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">还车地址</label>
            <div class="layui-input-block">
                <input type="text" name="backcity" id="backcity" class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">总价</label>
            <div class="layui-input-block">
                <input type="text" name="totalprice" id="totalprice" class="layui-input" lay-verify="required"
                       autocomplete="off" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-user-form-submit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<div id="app" class="bgGray">
    <div data-v-95ac8d30="" class="header3">
        <div data-v-95ac8d30="" class="layout clear">
            <div data-v-95ac8d30="" class="left logo">
                <a data-v-95ac8d30="" href="index.html">
                    <img data-v-95ac8d30=""
                         src="">
                </a>
            </div>
            <div data-v-95ac8d30="" class="header3Nav right">|<a data-v-95ac8d30=""
                                                                 href="mymain.html">我的订单</a>|<a
                    data-v-95ac8d30="" href="helpCenter.html">帮助中心</a>|<a data-v-95ac8d30=""
                                                                          href="javascript:">退出</a></div>
            <div data-v-95ac8d30="" class="header3User right"><i data-v-95ac8d30=""
                                                                 class="iconfont icon-phone"></i><span
                    data-v-95ac8d30="" class="sp1">400-919-8000</span><span data-v-95ac8d30=""
                                                                            class="sp2" id="sp2"></span><span
                    data-v-95ac8d30="" class="sp3"></span></div>
        </div>
    </div>


    <div class="checkOrderTit">
        <div class="layout">
            <div class="checkOrderTitCom">
                <div class="checkOrderTitComT">
                    <div class="td1 bgRed"></div>
                    <div class="td2 bgRed">1</div>
                    <div class="td3 bgRed"></div>
                    <div class="td2 bgRed">2</div>
                    <div class="td3 bgGray1"></div>
                    <div class="td2 bgGray1">3</div>
                    <div class="td1 bgGray1"></div>
                </div>
                <div class="checkOrderTitComB">
                    <div class="bd1 colorRed">选择车辆</div>
                    <div class="bd2 colorRed">填写和核对订单</div>
                    <div class="bd1 colorGray">提交成功</div>
                </div>
            </div>
        </div>
    </div>

    <div class="orderMsg clear">

        <div class="orderMsgs">
            <div class="orderMsgL left">
                <img :src="infos.picture">
                <p>{{infos.types}}|{{infos.sitnum}}座</p>

            </div>
            <div class="orderMsgR left">
                <div class="carTitle">
                    <span class="carTitle1 left" id="carnm">{{infos.name}}</span>
                </div>

                <div class="selCarMsg">
                    <div class="selCarMsgCom">
                        <div class="MsgTit">取车地址</div>
                        <div class="Msg" id="getcities">{{getcity}}</div>
                    </div>

                    <div class="selCarMsgCom">
                        <div class="MsgTit">还车地址</div>
                        <div class="Msg" id="backcities">{{backcity}}</div>
                    </div>
                </div>
            </div>
            <div class="costCom right">
                <h3>费用明细</h3>
                <div class="item">
                    <span class="left">基本租金</span>
                    <span class="right">{{infos.price}}元</span>
                </div>
                <div class="item">
                    <span class="left">手续费（35元/单）</span>
                    <span class="right">35元</span>
                </div>
                <div class="item">
                    <span class="left">基本保障服务</span>
                    <span class="right">50元</span>
                </div>
                <div class="payMony">
                    <label class="right">应付金额&nbsp;
                        <span id="total">{{current()}}</span></label>
                </div>

                <button class="buttons right" id="add-user-btn" onclick="">
                    提交订单
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            infos: [],
            getcitys: '',
            backcitys: ''
        },
        created: function () {
            var data = this;
            $.ajax({
                url: '/Car/CarById/' + localStorage.getItem("id"),
                type: "POST",
                contentType: "application/json",
                dataType: "json"
            }).then(function (res) {
                data.infos = res;
                data.getcity = localStorage.getItem("getcities");
                data.backcity = localStorage.getItem("backcities");
            })

        },
        methods: {
            current: function () {
                var total = 0;
                var money = 85;
                total = this.infos.price + money;
                return total;
            }
        }
    });
    $(function () {
        var id = window.localStorage.getItem("pid");
        $.ajax({
            url: "/Person/PersonByPid/" + id,
            dataType: "json",
            type: 'post',
            contentType: 'application/json',
            success: function (res) {
                var data = res;
                $("#sp2").text(res.name);
            }
        })
    })
    // function submitorder()  {
    //     localStorage.setItem("totalprice", total);
    //     window.location.href = "mymain.html";
    // }
</script>
<script>

    layui.use('form', function () {
        var form = layui.form;
        $('#add-user-btn').click(function () {
            // 每次显示前重置表单
            $('#add-user-form')[0].reset();
            layer.open({
                type: 1,
                title: '确认订单',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#add-user-layer')
            });
            $("#carname").val(document.getElementById("carnm").innerText);
            $("#pid").val(localStorage.getItem("pid"));
            $("#getcity").val(document.getElementById("getcities").innerText);
            $("#backcity").val(localStorage.getItem("backcities"));
            $("#totalprice").val(document.getElementById("total").innerText);

        });
        form.on('submit(add-user-form-submit)', function (data) {
            // ajax方式添加用户
            $.ajax({
                url: "/Order/OrderSave",
                type: "POST",
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                dataType: 'json',
                success: function (res) {
                    if (res) {
                        alert("添加成功");
                        location.href = 'mymain.html';
                    } else {
                        layer.msg('添加失败');
                    }
                },
                error: function () {
                    console.log("ajax error");
                }
            })
        });
    });
</script>
</body>
</html>